import React, { PureComponent } from "react";
import { View, StyleSheet, Text } from "react-native";
import { Colors, FontSize } from "../../common/Theme/TTheme";
import { scaleSize } from "../../common/Utils/ToolUtils";
import { TText } from "../../common/Widgets/WidgetDefault";

class NormalExceptCircle extends React.PureComponent {
    render() {
        const{title, normal, normalText = "正常", exceptText = "异常", normalColor = Colors.normal_color, 
            exceptColor = Colors.error_color, containerStyle} = this.props;
        return <View style={[styles.container, containerStyle]}>
                    <View style={[styles.circle, normal ? {backgroundColor: normalColor} : {backgroundColor: exceptColor}]}>
                        <Text style={{color: Colors.white, fontSize: FontSize.h3_font}}>{normal ? `${normalText}` : `${exceptText}`}</Text>
                    </View>
                    <Text style={{fontSize:FontSize.h5_font, marginTop:scaleSize(10)}}>{`${title}`}</Text>
        </View>
    }
}

class NumberCircle extends React.PureComponent {
    render() {
        const{title, number, bgColor, containerStyle} = this.props;
        return <View style={[styles.container, containerStyle]}>
            <View style={[styles.circle, {backgroundColor: bgColor}]}>
                <Text style={{color:Colors.white, fontSize: FontSize.h2_font}}>{`${number}`}</Text>
            </View>
            <Text style={{fontSize:FontSize.h5_font, marginTop:scaleSize(10)}}>{`${title}`}</Text>
        </View>
    }
}

class UpDownText extends React.PureComponent {
    render() {
        const{title, number, containerStyle} = this.props;
        return <View style={[styles.container, {alignItems:'center'}, containerStyle]}>
                <Text style={{fontSize: FontSize.h1_font, height:scaleSize(88)}}>{`${number}`}</Text>
                <Text style={{fontSize:FontSize.h5_font, marginTop:scaleSize(6)}}>{`${title}`}</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    container:{
        flexDirection:'column',
        alignItems:'center',
    },
    circle:{
        width: scaleSize(88),
        height: scaleSize(88),
        borderRadius: scaleSize(44),
        alignItems:'center',
        justifyContent:'center'
    }
});

export function TNormalExceptCircle({...props}) {
    return <NormalExceptCircle {...props} />
}

export function TNumberCircle({...props}) {
    return <NumberCircle {...props}/>
}

export function TUpDownText({...props}) {
    return <UpDownText {...props}/>
}